<script>
// 顶部tab+页面切换
import { defineComponent } from 'vue'
export default defineComponent({
	name: 'WeworkQr'
})
</script>
<script setup>
import {customerDataList} from '@/data'
import { deepClone, isEmpty,customerStatus } from '@/utils'
	import MyIcon from '@/components/my-icon/index.vue'
	import { ref } from 'vue'
	const queryForm = ref({
		qrId:''
	})

const tableData = ref()
tableData.value = customerDataList

	const multipleTableRef = ref()
	const multipleSelection = ref([])
	const selectAll = ref(false)
	const total = ref(0)

	const exportExcel = () => {
		console.log('导出excel')
	}
	const handleCurrentChange = (val) => {
		console.log(`current page: ${val}分页请求接口`)
		getqrList()
	}
	const handleSelectAll = () => {
		multipleTableRef.value.clearSelection()
		if (selectAll.value) {
			tableData.value.forEach((row) => {
				multipleTableRef.value.toggleRowSelection(row, undefined)
			})
		}
	}

	const handleSelectionChange = (val) => {
		multipleSelection.value = val
		if (multipleSelection.value.length == qrDataSetList.value.length) {
			selectAll.value = true
		} else {
			selectAll.value = false
		}
	}

</script>
<template>
	<div class="app-table-box">
	<div class="">
		<div class="app-flex-left">
			<span class="app-words-2 app-flex-left">共{{ total }}个客户  <span class="app-gap-words-left-s app-words-1 weak-grey-font app-words-800">已选择{{multipleSelection.length}}个客户</span>
			<span class="weak-grey-font app-gap-words-left-s">|</span>
			<div>
				<div style="height:4px;"></div>
				<MyIcon class="app-pointer app-gap-words-left-s weak-grey-font" name="Fresh" />
			</div>
				<span class="app-words-1 weak-grey-font app-gap-words-left-s app-words-800">更新数据</span>
			</span>
		</div>
				<div class="app-gap-words-left table-head app-flex-left app-gap-block-top">
					
					<el-checkbox v-model="selectAll" @change="handleSelectAll" size="large" />
					<span class="app-words-2 app-gap-words-left ">当页全选</span>



						<el-button :disabled="multipleSelection.length==0" class="app-btn app-gap-words-left" @click="exportExcel">加黑名单</el-button>

							<el-button :disabled="multipleSelection.length==0" class="app-btn app-gap-words-left" @click="exportExcel">打标签</el-button>

								<el-button :disabled="multipleSelection.length==0" class="app-btn app-gap-words-left" @click="exportExcel">移除标签</el-button>

									<el-button :disabled="multipleSelection.length==0" class="app-btn app-gap-words-left" @click="exportExcel">修改积分</el-button>

										<el-button :disabled="multipleSelection.length==0" class="app-btn app-gap-words-left" @click="exportExcel">修改评分</el-button>


										<el-button :disabled="multipleSelection.length==0" class="app-btn app-gap-words-left" @click="exportExcel">导出Excel</el-button>

					<el-button :disabled="multipleSelection.length==0" class="app-btn app-gap-words-left" @click="exportExcel">导出Excel</el-button>
				</div>
				<el-table class=" a-mt20 app-select-table app-container-radius" ref="multipleTableRef" :data="tableData" style="width:100%"
					@selection-change="handleSelectionChange">
					<el-table-column type="selection" fixed="left" />
						<el-table-column width="140" label="客户" align="left">
              <template #default="scope">
                <div class="app-flex-left">
                <el-avatar
                          class="cho-margin"
                          shape="square"
                          :size="30"
                          :src="scope.row.avatar"
                        />
                <span class="app-gap-words-left">
                {{ scope.row.name }}
                </span>
                </div>
						</template>
					</el-table-column>
					<el-table-column prop="groupName" label="所在群聊" align="left" />
						<el-table-column prop="staffName" label="所属客服" align="left" />
						<el-table-column prop="departmentName" label="所属客服" align="left" />
           <el-table-column label="标签" align="left">
              <template #default="scope">
                <div class="">
                  <el-tag class="app-br-10" v-for="(item,index) in scope.row.tags" :key="index">
                  <span class="app-regular-font ">{{item}}</span>
                  </el-tag>
           
                </div>
						</template>
          </el-table-column>
        
          <el-table-column label="添加时间" prop="createTime" align="left">
          </el-table-column>
          
           <el-table-column label="操作" align="right">
              <template #default="scope">
                <span class="app-primary-font app-pointer">详情</span>
						</template>
          </el-table-column>
				</el-table>
				<el-pagination class="app-page" @current-change="handleCurrentChange" background layout="prev, pager, next"
					:total="total" />
			</div>
	</div>
</template>
<style lang="scss">
	@import url('../../../../style/app-component.scss');
	@import '../../../../style/mixin.scss';
</style>